<template>
	<div class="sys-role-edit-container">
		<el-card class="breadcrumb-card card-form" :style="{height:formHeight+'px'}">
			<!-- 路径导航 -->
			<div slot="header" class="breadcrumb-header">
				<el-page-header @back="$router.back()" title="角色管理" content="编辑"/>
				<div class="btn-list">
					<el-button size="small" type="primary" @click="submit">保存<i class="el-icon-check el-icon--right"/></el-button>
					<el-button size="small" @click="$router.back()">取消<i class="el-icon-close el-icon--right"/></el-button>
				</div>
			</div>
			<!-- form表单 -->
			<el-scrollbar class="form edit-form">
				<el-form ref="form" :model="form" label-width="90px" :show-message="false" :rules="rules">
					<el-form-item label="角色名称:" prop="name">
						<el-input size="medium" v-model="form.name" placeholder="请输入角色名称" maxlength="10"></el-input>
					</el-form-item>
					<el-form-item label="角色权限:">
						<el-tree ref="tree" class="menuTree" @check-change="nodeClick" node-key="id" check-strictly show-checkbox default-expand-all check-on-click-node :expand-on-click-node="false" :data="menuTree" :props="{children: 'childList',label: 'name'}"></el-tree>
					</el-form-item>
				</el-form>
			</el-scrollbar>
		</el-card>		
	</div>
</template>

<script>
import sysApi from '@/api/sysApi'	
import sysRoleApi from '@/api/sysRoleApi'	
import sysMenuApi from '@/api/sysMenuApi'
	
export default {
	name: 'sysUserEdit',
	data () {
		return {
			formHeight: 0,
			/* 表单数据 */
			form: {},
			/* 校验规则 */
			rules: {
				name: [{required: true, message: '请输入角色名称'}]
			},
			/* 菜单树 */
			menuTree: []
		}
	},
	mounted () {
		this.$nextTick(() => { 
			let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			this.formHeight = h -80;
		});
	},
	created () {
		//获取详情
		if(this.$route.query.id){
			this.getDetail();
		}
		//获取系统菜单树
		this.getMenuTree();
	},
	methods: {
		/* 获取详情 */
		async getDetail () {
			const result = await sysRoleApi.sysRoleDetail(this.$route.query.id);
			this.form = result.data;
			//设置选中的菜单
			this.$refs.tree.setCheckedKeys(result.data.menuIds.split(','));
		},
		/* 获取系统菜单树 */
		async getMenuTree () {
			const result = await sysMenuApi.sysMenuTree();
			this.menuTree = result.data;
		},
		/* 菜单选中联动事件 */
		nodeClick(data, node){
			const  _this = this
			// 获取当前节点是否被选中
			const isChecked = this.$refs.tree.getNode(data.id).checked
			if(isChecked){
				// 判断是否有上级节点，如果有那么遍历设置上级节点选中
				data.parentId != 0 &&  setParentChecked(data.parentId)
				// 判断该节点是否有下级节点，如果有那么遍历设置下级节点为选中
				data.childList && setChildreChecked(data.childList,true)
			}else{
				// 如果节点取消选中，则取消该节点下的子节点选中
				data.childList && setChildreChecked(data.childList,false)
			}
			function setParentChecked(parentId){
				// 获取该id的父级node
				const parentNode = _this.$refs.tree.getNode(parentId)
				// 如果该id的父级node存在父级id则继续遍历
				parentNode && parentNode.data.parentId != 0 && setParentChecked(setParentChecked)
				// 设置该id的节点为选中状态
				_this.$refs.tree.setChecked(parentId,true)
			}
			function setChildreChecked(node,isChecked){
				node.forEach(item => {
					item.childList && setChildreChecked(item.childList,isChecked)
					_this.$refs.tree.setChecked(item.id,isChecked)
				})
			}
			this.form.menuIds = this.$refs.tree.getCheckedKeys().join(",");
		},
		/* 提交表单 */
		async submit () {
			this.$refs.form.validate(async (valid, error) => {
				/* 校验数据 */
				if(valid){
					let result;
					if(this.form.id){
						//编辑
						result = await sysRoleApi.updateRole(this.form);
					}else{
						//新增
						result = await sysRoleApi.addRole(this.form);
					}
					if(result.code == 200){
						this.$message.success('操作成功!');
						this.$router.back();
					}else{
						this.$message.error(result.msg);
					}
				}else{
					this.$message.error(error[Object.keys(error)[0]][0].message)
				}
			})
		}
	}
}	
</script>

<style lang="scss">
.sys-role-edit-container{
	.menuTree{
		top: 7px;
	}
	.submit{
		margin-top: 30px;
	}
}	
</style>
